<template>
  <div class='container'>

      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">【题型】：{{questionTypeEnmu(tableData.questionType)}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【编号】：{{tableData.id}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【难度】：{{difficultyEnmu(tableData.difficulty)}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【标签】：{{tableData.tags}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{tableData.subjectName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【目录】：{{tableData.catalog}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{tableData.direction}}</div></el-col>
      </el-row>
        【题干】：
      <div style="color:blue">
          <p>{{tableData.question | html2Text}}</p>
      </div>
      <div>
        <el-row align="top">
            <el-col ><div class="grid-content bg-purple">{{tableData.questionType}} 选项：（以下选中的选项为正确答案）</div></el-col>
             <!-- 单选题 -->
             <el-radio-group v-model="radio" v-if="tableData.questionType === '1'">
               <el-col v-for="item in options" :key="item.id" v-model="radio" >
              <el-radio :label="item.isRight"  :disabled="item.isRight === 0">{{ item.code + ':' +  item.title  }}</el-radio>
                </el-col>
             </el-radio-group>

        </el-row>
            <!-- 多选题 -->
            <div v-if="tableData.questionType === '2'">
              <div v-for="item in options" :key="item.id" >
              <el-checkbox v-model="item.isRight"  :disabled="item.isRight === 0" @change="aaa(item)" >{{item.code + ':' +  item.title}}</el-checkbox>
            </div>
            </div>

      </div>
      <el-row >
        <el-col ><div class="grid-content bg-purple">
          【参考答案】：
          <el-button type="danger" size="small" @click="hVideo">视频答案预览</el-button>

        </div></el-col>
         <div v-if="isShow">
          <video width="320" height="240" controls autoplay :src="tableData.videoURL"></video>
        </div>
      </el-row>
      <el-row>
          <el-col ><div class="grid-content bg-purple">【答案解析】：{{tableData.answer ? tableData.answer : '无' | html2Text}}</div></el-col>
      </el-row>
      <p>【题目备注】{{tableData.remarks ? tableData.remarks : '无'}}</p>
      <el-row style="text-align: center; border:none">
      </el-row>

  </div>
</template>

<script>
import '@/filters/index.js'
import { difficulty, questionType } from '@/api/hmmm/constants.js'
// 难度数据转换
const difficultyEnmu = difficulty.reduce((acc, item) => { return { ...acc, [item.value]: item.label } }, {})
// 题型数据转换
const questionTypeEnmu = questionType.reduce((acc, item) => { return { ...acc, [item.value]: item.label } }, {})
export default {
  name: 'QuestionsPreview',
  props: {
    tableData: {
      type: Object, // 数据可以是字符串，数字，数组形式
      required: true
    },
    catalog: {
      type: [String],
      require: true
    }
  },
  data () {
    return {
      radio: 1,
      isShow: false,
      isEdit: false,
      edit: false
    }
  },
  computed: {
    options () {
      if (this.tableData.questionType === '2') {
        if (!this.tableData.options) {
          return
        }
        // -------------------
        this.opSort(this.tableData.options)
        // -------------------
        // 判断状态码
        this.tableData.options.forEach(item => {
          if (item.isRight === 1) {
            item.isRight = true
          }
        })
        console.log(this.tableData.options)
        return this.tableData.options
      } else {
        return this.tableData.options
      }
    }

  },
  methods: {
    // 选项转换
    opSort (keyName) {
      return function (objectN, objectM) {
        var valueN = objectN[keyName]
        var valueM = objectM[keyName]
        if (valueN < valueM) return -1
        else if (valueN > valueM) return 1
        else return 0
      }
    },
    // 视频弹窗
    hVideo () {
      this.isShow = !this.isShow
    },
    // 难度转换状态
    difficultyEnmu (val) {
      return difficultyEnmu[val]
    },
    // 题型转换状态
    questionTypeEnmu (val) {
      return questionTypeEnmu[val]
    },
    aaa (item) {
      console.log(item.isRight)
    }
  }

}

</script>

<style scoped lang='scss'>

.el-row {
border-bottom: 1px solid #606266;
}
.grid-content {
    padding: 10px 0px;

}
.el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 20px;
    }
  }
 .el-radio {
   display: block;
   margin: 10px 0;
 }
 .el-checkbox {
  display: block;
  margin: 10px 0;
 }

</style>
